<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>笔记编辑器 - 笔记云</title>
  <!-- 引入Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- 引入Font Awesome图标 -->
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

  <!-- 自定义配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#334155',
            success: '#10B981',
            warning: '#F59E0B',
            neutral: {
              100: '#F5F7FA',
              200: '#E4E7ED',
              300: '#C0C4CC',
              800: '#333333'
            }
          },
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>

  <style type="text/tailwindcss">
    @layer utilities {
      .btn-primary {
        @apply bg-primary text-white px-4 py-2 rounded-md transition-all hover:bg-primary/90 active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed;
      }
      .btn-success {
        @apply bg-success text-white px-4 py-2 rounded-md transition-all hover:bg-success/90 active:scale-95;
      }
      .btn-icon {
        @apply flex items-center justify-center rounded-md transition-all hover:bg-neutral-100 active:scale-95;
      }
      .editor-toolbar {
        @apply flex items-center gap-2 p-3 border-b border-neutral-200 bg-neutral-50;
      }
      .editor-btn {
        @apply px-3 py-1.5 text-sm rounded-md transition-all hover:bg-neutral-200 active:scale-95;
      }
      .editor-btn.active {
        @apply bg-primary text-white;
      }
    }
  </style>
</head>

<body class="bg-neutral-100 min-h-screen">
  <!-- 加载指示器 -->
  <div id="loading" class="fixed inset-0 bg-white bg-opacity-75 flex items-center justify-center z-50 hidden">
    <div class="text-center">
      <i class="fa fa-spinner fa-spin text-3xl text-primary mb-4"></i>
      <p class="text-neutral-600">加载中...</p>
    </div>
  </div>

  <!-- 主容器 -->
  <div class="min-h-screen flex flex-col">
    <!-- 顶部工具栏 -->
    <div class="bg-white border-b border-neutral-200 px-6 py-4">
      <div class="flex items-center justify-between">
        <!-- 左侧操作 -->
        <div class="flex items-center gap-4">
          <button id="back-btn" class="btn-icon w-10 h-10" title="返回">
            <i class="fa fa-arrow-left text-neutral-600"></i>
          </button>
          
          <div class="flex items-center gap-2 text-sm text-neutral-500">
            <i id="save-indicator" class="fa fa-circle text-green-500"></i>
            <span id="save-text">已保存</span>
          </div>
        </div>

        <!-- 中间标题输入 -->
        <div class="flex-1 max-w-2xl mx-8">
          <input type="text" id="note-title" placeholder="输入笔记标题..."
                 class="w-full text-lg font-medium text-neutral-800 bg-transparent border-none outline-none placeholder-neutral-400"
                 maxlength="200">
          <div class="text-xs text-neutral-400 mt-1">
            <span id="title-char-count">0</span>/200 字符
          </div>
        </div>

        <!-- 右侧操作 -->
        <div class="flex items-center gap-3">
          <button id="word-count-btn" class="btn-icon w-10 h-10" title="字数统计">
            <i class="fa fa-bar-chart text-neutral-600"></i>
          </button>
          
          <button id="preview-btn" class="btn-icon w-10 h-10" title="预览">
            <i class="fa fa-eye text-neutral-600"></i>
          </button>
          
          <div class="flex items-center gap-2">
            <label class="flex items-center gap-2 text-sm text-neutral-600">
              <input type="checkbox" id="auto-save-toggle" checked class="rounded">
              自动保存
            </label>
          </div>
          
          <button id="save-btn" class="btn-primary">
            <i class="fa fa-save mr-2"></i>保存
          </button>
        </div>
      </div>
    </div>

    <!-- 编辑器区域 -->
    <div class="flex-1 flex flex-col">
      <!-- 工具栏 -->
      <div class="editor-toolbar">
        <div class="flex items-center gap-1">
          <!-- 格式化工具 -->
          <button class="editor-btn" data-command="bold" title="粗体 (Ctrl+B)">
            <i class="fa fa-bold"></i>
          </button>
          <button class="editor-btn" data-command="italic" title="斜体 (Ctrl+I)">
            <i class="fa fa-italic"></i>
          </button>
          <button class="editor-btn" data-command="underline" title="下划线 (Ctrl+U)">
            <i class="fa fa-underline"></i>
          </button>
          <button class="editor-btn" data-command="strikethrough" title="删除线">
            <i class="fa fa-strikethrough"></i>
          </button>
          
          <div class="w-px h-6 bg-neutral-300 mx-2"></div>
          
          <!-- 标题工具 -->
          <button class="editor-btn" data-command="h1" title="标题1">H1</button>
          <button class="editor-btn" data-command="h2" title="标题2">H2</button>
          <button class="editor-btn" data-command="h3" title="标题3">H3</button>
          
          <div class="w-px h-6 bg-neutral-300 mx-2"></div>
          
          <!-- 列表工具 -->
          <button class="editor-btn" data-command="ul" title="无序列表">
            <i class="fa fa-list-ul"></i>
          </button>
          <button class="editor-btn" data-command="ol" title="有序列表">
            <i class="fa fa-list-ol"></i>
          </button>
          
          <div class="w-px h-6 bg-neutral-300 mx-2"></div>
          
          <!-- 插入工具 -->
          <button class="editor-btn" data-command="link" title="插入链接">
            <i class="fa fa-link"></i>
          </button>
          <button class="editor-btn" data-command="image" title="插入图片">
            <i class="fa fa-image"></i>
          </button>
          
          <div class="w-px h-6 bg-neutral-300 mx-2"></div>
          
          <!-- 快速插入 -->
          <button id="insert-date-btn" class="editor-btn" title="插入日期">
            <i class="fa fa-calendar"></i>
          </button>
          <button id="insert-time-btn" class="editor-btn" title="插入时间">
            <i class="fa fa-clock-o"></i>
          </button>
        </div>
      </div>

      <!-- 编辑器内容 -->
      <div class="flex-1 bg-white">
        <div id="rich-editor-container" class="h-full min-h-[500px] p-6">
          <!-- 富文本编辑器将在这里初始化 -->
          <div id="editor-content" contenteditable="true" 
               class="h-full outline-none text-neutral-800 leading-relaxed"
               placeholder="开始记录您的想法...">
          </div>
        </div>
      </div>
    </div>

    <!-- 底部状态栏 -->
    <div class="bg-white border-t border-neutral-200 px-6 py-3">
      <div class="flex items-center justify-between text-sm text-neutral-500">
        <div class="flex items-center gap-6">
          <span id="note-created">创建时间: -</span>
          <span id="note-updated">更新时间: -</span>
        </div>
        <div class="flex items-center gap-4">
          <span>字数: <span id="word-count-display">0</span></span>
          <span>字符: <span id="char-count-display">0</span></span>
        </div>
      </div>
    </div>
  </div>

  <!-- 预览模态框 -->
  <div id="preview-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
    <div class="bg-white rounded-lg w-full max-w-4xl mx-4 h-[80vh] flex flex-col">
      <div class="flex items-center justify-between p-6 border-b border-neutral-200">
        <h3 class="text-lg font-semibold text-neutral-800">笔记预览</h3>
        <div class="flex items-center gap-3">
          <button id="export-btn" class="btn-primary">
            <i class="fa fa-download mr-2"></i>导出
          </button>
          <button id="close-preview-btn" class="btn-icon w-8 h-8">
            <i class="fa fa-times text-neutral-500"></i>
          </button>
        </div>
      </div>
      
      <div class="flex-1 overflow-auto p-6">
        <h1 id="preview-title" class="text-2xl font-bold text-neutral-800 mb-4">笔记标题</h1>
        <div id="preview-content" class="prose prose-neutral max-w-none">
          <!-- 预览内容将在这里显示 -->
        </div>
      </div>
      
      <div class="p-6 border-t border-neutral-200">
        <button id="close-preview-btn-2" class="btn-primary w-full">
          关闭预览
        </button>
      </div>
    </div>
  </div>

  <!-- 字数统计模态框 -->
  <div id="word-count-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
    <div class="bg-white rounded-lg w-full max-w-md mx-4">
      <div class="flex items-center justify-between p-6 border-b border-neutral-200">
        <h3 class="text-lg font-semibold text-neutral-800">字数统计</h3>
        <button id="close-word-count-btn" class="btn-icon w-8 h-8">
          <i class="fa fa-times text-neutral-500"></i>
        </button>
      </div>
      
      <div class="p-6">
        <div class="grid grid-cols-2 gap-4">
          <div class="text-center">
            <div class="text-2xl font-bold text-primary" id="char-count-display">0</div>
            <div class="text-sm text-neutral-600">字符数</div>
          </div>
          <div class="text-center">
            <div class="text-2xl font-bold text-primary" id="word-count-display">0</div>
            <div class="text-sm text-neutral-600">字数</div>
          </div>
          <div class="text-center">
            <div class="text-2xl font-bold text-primary" id="paragraph-count-display">0</div>
            <div class="text-sm text-neutral-600">段落数</div>
          </div>
          <div class="text-center">
            <div class="text-2xl font-bold text-primary" id="reading-time-display">0</div>
            <div class="text-sm text-neutral-600">阅读时间(分钟)</div>
          </div>
        </div>
      </div>
      
      <div class="p-6 border-t border-neutral-200">
        <button id="close-word-count-btn-2" class="btn-primary w-full">
          关闭
        </button>
      </div>
    </div>
  </div>

  <!-- 引入应用脚本 -->
  <script src="/js/utils/api.js"></script>
  <script src="/js/utils/auth.js"></script>
  <script src="/js/utils/notification.js"></script>
  <script src="/js/components/rich-editor.js"></script>
  <script src="/js/components/note-editor.js"></script>
</body>

</html>